<template>
  <div class="smart-clip">
    <RouteTitle />
    <!-- 智能剪辑头部 -->
    <div class="smart-clip-header">
      <div class="smart-clip-header-right">
        <div class="menu-list">
          <div class="menu" v-for="(item, index) in tools" :key="index">
            <a-popover
             v-if="item.permission&&!clipRole.includes(item.key)"
              placement="top"
              trigger="hover"
              :getPopupContainer="(trigger) => trigger"
              :autoAdjustOverflow="false"
              :content="item.tip"
              >
              <div class="menu-item  script">
                <div class="mask-opacity" v-if="item.index_list_both">
                  <a-button
                    class="btn1"
                    disabled
                    @click="jumpPath(item.index_route_path)"
                    >创建</a-button
                  >
                  <a-button
                    class="mt-20 btn2"
                    disabled
                    @click="jumpPath(item.list_route_path)"
                    >记录</a-button
                  >
                  
                </div>
                <img
                  :src="item.main_icon"
                  class="menu-item-img"
                />
                <img
                v-if="item.top_icon"
                  :src="item.top_icon"
                  class="menu-item-icon"
                />
                <div class="menu-item-title">{{ item.title }}</div>
              </div>
           </a-popover>

            <div v-else class="menu-item  script" @click="item.index_list_both?'':jumpPath(item.index_route_path)">
              <div class="mask-opacity" v-if="item.index_list_both">
                <a-button
                  class="btn1"
                  @click="jumpPath(item.index_route_path)"
                  >创建</a-button
                >
                <a-button
                  class="mt-20 btn2"
                  @click="jumpPath(item.list_route_path)"
                  >记录</a-button
                >
              </div>
              <img
                :src="item.main_icon"
                class="menu-item-img"
              />
              <img
                v-if="item.top_icon"
                  :src="item.top_icon"
                  class="menu-item-icon"
                />
              <div class="menu-item-title">{{ item.title }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, computed, ref } from "vue";
import {  useRouter } from "vue-router";
import store from "../../../store";
export default {
  name: "LearningCenter",
  components: {},
  setup() {
    const router = useRouter();
    const state = reactive({
      names: {
        TextToSpeech: "TextToSpeech",
        AiWriting: "AiWriting",
        VideoIntelligentSplitList: "VideoIntelligentSplitList",
        AddVideoIntelligentSplit: "AddVideoIntelligentSplit",
        VideoToTextList: "VideoToTextList",
        AddVideoToText: "AddVideoToText",
        SceneCenter: "SceneCenter",
        VideoExtractionIndex: "VideoExtractionIndex",
        VideoExtractionList: "VideoExtractionList",
        VideoCroppingIndex:"VideoCroppingIndex",
        VideoCroppingList:"VideoCroppingList",
        VideoExtractAudioIndex: "VideoExtractAudioIndex",
        VideoExtractAudioList: "VideoExtractAudioList",
        VideoRemoveAudioIndex: "VideoRemoveAudioIndex",
        VideoRemoveAudioList: "VideoRemoveAudioList",
        VideoRemoveSubtitlesIndex: "VideoRemoveSubtitlesIndex",
        VideoRemoveSubtitlesList: "VideoRemoveSubtitlesList",
        VideoRemoveSignIndex: "VideoRemoveSignIndex",
        VideoRemoveSignList: "VideoRemoveSignList",
        VideoTranslateIndex: "VideoTranslateIndex",
        VideoTranslateList: "VideoTranslateList",
        VideoGenerateSubtitlesIndex: "VideoGenerateSubtitlesIndex",
        VideoGenerateSubtitlesList: "VideoGenerateSubtitlesList",
      },
    });

    const clipRole = computed(() => store.state.user?.clipRole || []);
    let wzzyy_main_icon = new URL("../../../common/image/workShotstackImage/wzzyy.png", import.meta.url).href
    let wzzyy_top_icon = new URL("../../../common/image/workShotstackImage/hot.png", import.meta.url).href
    let aicz_main_icon = new URL("../../../common/image/workShotstackImage/ai.png", import.meta.url).href
    let aicz_top_icon = new URL("../../../common/image/workShotstackImage/newBadge.png", import.meta.url).href
    let spzncf_main_icon = new URL("../../../common/image/workShotstackImage/zncf.png", import.meta.url).href
    let sqtqwz_main_icon = new URL("../../../common/image/workShotstackImage/tqspwz.png", import.meta.url).href
    let sptq_main_icon = new URL("../../../common/image/workShotstackImage/sptq.png", import.meta.url).href
    let spzmcc_main_icon = new URL("../../../common/image/workShotstackImage/tqspwz.png", import.meta.url).href
    let sptqyp_main_icon = new URL("../../../common/image/workShotstackImage/sptqyp.png", import.meta.url).href
    let spqcyp_main_icon = new URL("../../../common/image/workShotstackImage/spqcyp.png", import.meta.url).href
    let spcj_main_icon = new URL("../../../common/image/workShotstackImage/spcj.png", import.meta.url).href
    let sszmcc_main_icon = new URL("../../../common/image/workShotstackImage/sszmcc.png", import.meta.url).href
    let spccbz_main_icon = new URL("../../../common/image/workShotstackImage/spccbz.png", import.meta.url).href
    let spfy_main_icon = new URL("../../../common/image/workShotstackImage/spfy.png", import.meta.url).href
    let spsczm_main_icon = new URL("../../../common/image/workShotstackImage/spsczm.png", import.meta.url).href
    const tools = ref([
      {
        key: "wzzyy",
        permission: true,//是否需要权限验证
        title: "文字转语音",
        tip: "套餐不支持该权限",
        top_icon: wzzyy_top_icon,
        main_icon: wzzyy_main_icon,
        index_list_both: false,
        index_route_path: "TextToSpeech",
        list_route_path: "",
      },
     {
        key: "aicz",
        permission: true,
        title: "AI创作",
        tip: "套餐不支持该权限",
        top_icon: aicz_top_icon,
        main_icon: aicz_main_icon,
        index_list_both: false,
        index_route_path: "SceneCenter",
      },
       {
        key: "spzncf",
        permission: true,
        title: "视频智能拆分",
        tip: "套餐不支持该权限",
        top_icon: '',
        main_icon: spzncf_main_icon,
        index_list_both: true,
        index_route_path: "AddVideoIntelligentSplit",
        list_route_path: "VideoIntelligentSplitList",
      },
      {
        key: "tqspwz",
        permission: false,
        title: "提取视频文案",
        tip: "套餐不支持该权限",
        top_icon: '',
        main_icon: sqtqwz_main_icon,
        index_list_both: true,
        index_route_path: "AddVideoToText",
        list_route_path: "VideoToTextList",
      },
      {
        key: "sptq",
        permission: false,
        title: "视频提取",
        tip: "套餐不支持该权限",
        top_icon: '',
        main_icon: sptq_main_icon,
        index_list_both: true,
        index_route_path: "VideoExtractionIndex",
        list_route_path: "VideoExtractionList",
      },
      {
        key: "sptqyp",
        permission: false,
        title: "视频提取音频",
        tip: "套餐不支持该权限",
        top_icon: '',
        main_icon: sptqyp_main_icon,
        index_list_both: true,
        index_route_path: "VideoExtractAudioIndex",
        list_route_path: "VideoExtractAudioList",
      },
      {
        key: "spqcyp",
        permission: false,
        title: "视频去除音频",
        tip: "套餐不支持该权限",
        top_icon: '',
        main_icon: spqcyp_main_icon,
        index_list_both: true,
        index_route_path: "VideoRemoveAudioIndex",
        list_route_path: "VideoRemoveAudioList",
      },
      {
        key: "sqcj",
        permission: false,
        title: "视频裁剪",
        tip: "套餐不支持该权限",
        top_icon: '',
        main_icon: spcj_main_icon,
        index_list_both: true,
        index_route_path: "VideoCroppingIndex",
        list_route_path: "VideoCroppingList",
      },
      {
        key: "sqcczm",
        permission: false,
        title: "视频擦除字幕",
        tip: "套餐不支持该权限",
        top_icon: '',
        main_icon: sszmcc_main_icon,
        index_list_both: true,
        index_route_path: "VideoRemoveSubtitlesIndex",
        list_route_path: "VideoRemoveSubtitlesList",
      },
      {
        key: "sqccbz",
        permission: false,
        title: "视频擦除标志",
        tip: "套餐不支持该权限",
        top_icon: '',
        main_icon: spccbz_main_icon,
        index_list_both: true,
        index_route_path: "VideoRemoveSignIndex",
        list_route_path: "VideoRemoveSignList",
      },
      {
        key: "spfy",
        permission: false,
        title: "视频翻译",
        tip: "套餐不支持该权限",
        top_icon: '',
        main_icon: spfy_main_icon,
        index_list_both: true,
        index_route_path: "VideoTranslateIndex",
        list_route_path: "VideoTranslateList",
      },
      {
        key: "spsczm",
        permission: false,
        title: "视频生成字幕",
        tip: "套餐不支持该权限",
        top_icon: '',
        main_icon: spsczm_main_icon,
        index_list_both: true,
        index_route_path: "VideoGenerateSubtitlesIndex",
        list_route_path: "VideoGenerateSubtitlesList",
      },
    ])

    const jumpPath = (key) => {
      console.log(key, "key");
      if (key == "SceneCenter") {
        router.push({
          name: state.names[key],
          query: {
            key,
          },
        });
      } else {
        router.push({
          name: state.names[key],
        });
      }
    };
    return {
      ...toRefs(state),
      clipRole,
      jumpPath,
      tools,
    };
  },
};
</script>

<style lang="less" scoped>
.smart-clip {
  padding: 14px 14px 0;
}

.smart-clip-header {
  display: flex;
  height: 220px;
  margin: 20px 0;
}

.smart-clip-header-title {
  font-size: 24px;
}

.smart-clip-header-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  width: 700px;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.smart-clip-header-right {
  // width: calc(100% - 700px);
  // margin-left: 20px;
}

.segment {
  width: 260px;
  display: flex;
  padding: 5px;
  background-color: #ff916514;
}

.segment-item {
  --n-tab-border-radius: 6px;
  overflow: hidden;
  border-radius: var(--n-tab-border-radius);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #2878ff;
}

.active-tab {
  box-shadow: 4px 4px 10px #2878ff33;
  background-color: #fff;
  color: #2878ff;
}
.data-item {
  padding: 16px 15px;
  border-radius: 16px;
  background: #ffffff;
  min-width: 150px;
  min-height: 128px;
  flex-shrink: 0;
}
.data-value {
  font-family: DIN Alternate Bold;
  font-size: 26px;
  font-weight: 700;
  margin-top: 10px;
}
.menu-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.menu-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.05);
  min-width: 180px;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
  height: 220px;
  transition: all 0.3s;

  :deep(.ss-popover-placement-top) {
    top: -2px !important;
  }
}
.menu-item-icon {
  position: absolute;
  right: 0;
  top: 0;
  width: 70px;
}
.menu-item-img {
  width: 110px;
}
.menu-item-title {
  font-size: 18px;
}
.ml-16 {
  margin-left: 16px;
}

.custom:before,
.ai-build:before {
  background: linear-gradient(
    46deg,
    #fcfcfc 0%,
    #e8e5fa 44%,
    #e8e5fa 56%,
    #e8e5fa 68%,
    #f6f6f6 100%
  );
  opacity: 0;
}

.fast:before {
  background: linear-gradient(46deg, #fcfcfc 0%, #dff5fa 56%, #fcfcfc 100%);
  opacity: 0;
}
.script:before {
  background: linear-gradient(46deg, #fcfcfc 0%, #deebff 56%, #f6f6f6 100%);
}

.menu-item:hover:before {
  opacity: 1;
}

.image_text:before {
  background: linear-gradient(
    46deg,
    #f4d0d1 0%,
    #f7efea 44%,
    #f7f0ea 56%,
    #f7efe9 68%,
    #f8e1df 100%
  );
  opacity: 0;
}
.menu-item:hover .menu-item-img,
.menu-item:hover .menu-item-title {
  transform: translateY(-5px) scale(1.05);
}
.menu-item .menu-item-img {
  width: 110px;
  transition: all 0.3s;
}
.menu-item:before {
  content: "";
  opacity: 0;
  position: absolute;
  inset: 0;
  transition: opacity 0.5s;
}
.content-title {
  font-size: 24px;
}
.n-grid {
  display: flex;
}
.search-area {
  // min-width: 1200px;
  button {
    border-radius: 5px 0 0 5px;
  }
  .ss-input-affix-wrapper {
    border-radius: 0 5px 5px 0;
  }
  .ss-select {
    border-radius: 0 5px 5px 0;
  }
}
/* 当屏幕宽度大于等于 1200px 时应用的样式 */
@media screen and (min-width: 1200px) {
  /* 在这里添加针对 1200px 及以上屏幕宽度的样式 */
  .n-grid {
    display: grid;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0px, 1fr));
    gap: 20px 16px;
  }
  .last-gird-item {
    grid-column: 4 / span 1 !important;
    display: flex;
    justify-content: flex-end;
  }
}

/* 当屏幕宽度小于 1199px 时应用的样式 */
@media screen and (max-width: 1199px) {
  /* 在这里添加针对 799px 及以下屏幕宽度的样式 */
  .n-grid {
    display: grid;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0px, 1fr));
    gap: 20px 16px;
    .last-gird-item {
      grid-column: 2 / span 1;
    }
  }
}
.n-grid-item {
  grid-column: span 1 / span 1;
}

.hidden-grid-item {
  display: none;
}
.n-input-group {
  display: inline-flex;
  width: 100%;
  flex-wrap: nowrap;
  vertical-align: bottom;
}
.grid-btn {
  display: flex;
  justify-content: flex-end;
}
.table-content {
  margin-top: 30px;
}
.script .mask-opacity {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: all 0.2s;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 15;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.8);
  border: 1px dashed #2878ff;

  .btn1 {
    width: 80px;
    height: 40px;
    color: #fff;
    background: #2878ff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 12px;
  }
  .btn2 {
    width: 80px;
    height: 40px;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 12px;
  }
}
.script:hover .mask-opacity {
  opacity: 1;
}
.script .mask-opacity .btn2:hover {
  color: #2878ff;
}
button {
  border-radius: 5px;
}
:deep(.ss-select-selector) {
  border-radius: 0 5px 5px 0 !important;
}
</style>
